<script setup lang="ts">
import { useRouter } from 'vue-router'
import noAccess from '@/assets/img/status/403.svg?component'
import { useI18n } from 'vue-i18n'

defineOptions({
  name: '403'
})

const { t } = useI18n()

const router = useRouter()
</script>

<template>
  <div class="flex justify-center items-center h-[100%]">
    <noAccess />
    <div class="ml-12">
      <p
        v-motion
        class="font-medium text-4xl mb-4 dark:text-white"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80
          }
        }"
      >
        403
      </p>
      <p
        v-motion
        class="mb-4 text-gray-500"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 120
          }
        }"
      >
        {{ t('route.403') }}
      </p>
      <el-button
        v-motion
        type="primary"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 160
          }
        }"
        @click="router.push('/')"
      >
        {{ t('button.backHomeText') }}
      </el-button>
    </div>
  </div>
</template>
